<template>
  <div class="box">
    <div class="boxtop">
      <van-nav-bar title="历史报价">
        <template #right>
          <van-icon
            name="cross"
            color="#ffffff"
            size="18"
            @click="closePage"
          ></van-icon>
        </template>
      </van-nav-bar>
    </div>
    <div class="historyDate" v-for="(item, index) in historyPrice" :key="index">
      <van-row>
        <van-col :span="14" class="Date">{{ item.soldTime }}</van-col>
        <van-col :span="6" class="price">{{ item.soldPrice + "万" }}</van-col>
      </van-row>
    </div>
    <van-divider />
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  data () {
    return {}
  },
  methods: {
    closePage () {
      this.$router.back()
    }
  },
  computed: {
    ...mapState(['historyPrice'])
  }
}
</script>
<style lang='less' scoped>
.box {
  height: 100vh;
  background-color: #f6f6f9;
  .boxtop {
    position: relative;
    height: 95px;
    width: 100%;
    background-color: #243865;
    .van-nav-bar {
      position: absolute;
      width: 100%;
      bottom: 0;
      background-color: transparent;
    }
  }
  .historyDate {
    width: 100%;
    height: 40px;
    line-height: 40px;
    margin-top: 2px;
    background-color: #ffffff;
    color: #464646;
    font-size: 14px;
    font-weight: 400;
    .van-col {
      padding-left: 40px;
    }
  }
}
</style>
